<script setup>
//:class绑定  字符串（一个或多个）  对象  数组

//下面是:style
import { ref, computed } from "vue";
const isPrimaryBackground = ref(true);

const backgroundStyle = computed(() => ({
  backgroundColor: isPrimaryBackground.value ? "lightblue" : "lightcoral",
  padding: "20px",
}));
function toggleBackground() {
  isPrimaryBackground.value = !isPrimaryBackground.value;
}
</script>
<template>
  <div>
    <button @click="toggleBackground">切换背景</button>
    <div :style="backgroundStyle" class="content"></div>
  </div>
</template>
<style scoped>
.bg-primary {
  background-color: lightblue;
  padding: 20px;
}
.bg-secondary {
  background-color: lightcoral;
  padding: 20px;
}
.content {
  width: 200px;
  margin: 20px auto;
  line-height: 100px;
  text-align: center;
}
</style>
